<template>
  <div>
    <template v-for="(item, index) in menuList">
      <Dropdown
        v-if="item.children"
        placement="right-start"
        :key="index"
        @on-click="changeMenu">
        <Button
          class="sidebar-menu-shrink-item"
          :class="{ 'router-active': routeInfo.meta.needOpen === item.name }"
          type="text">
          <Icon :size="20" :type="item.icon"></Icon>
        </Button>
        <DropdownMenu style="width: 200px;" slot="list">
          <template v-for="child in item.children">
            <DropdownItem
              class="sidebar-menu-shrink-dropdown"
              :class="{ 'router-active': routeInfo.meta.activeName === child.name }"
              :name="child.name"
              :key="child.title">
              <Icon :type="child.icon"></Icon>
              <span style="padding-left:10px;">{{ child.title }}</span>
            </DropdownItem>
          </template>
        </DropdownMenu>
      </Dropdown>
      <Dropdown
        v-else
        placement="right-start"
        :key="index"
        @on-click="changeMenu">
        <Button
          class="sidebar-menu-shrink-item"
          :class="{ 'router-active': routeInfo.name === item.name }"
          type="text"
          @click="changeMenu(item.name)">
          <Icon :size="20" :type="item.icon"></Icon>
        </Button>
        <DropdownMenu style="width: 200px;" slot="list">
          <DropdownItem
            class="sidebar-menu-shrink-dropdown"
            :class="{ 'router-active': routeInfo.name === item.name }"
            :name="item.name"
            :key="item.title">
            <Icon :type="item.icon"></Icon>
            <span style="padding-left:10px;">{{ item.title }}</span>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { cloneObj } from 'common/js/util'
import { homeMenuList } from 'common/js/modules'

export default {
  created () {
    this.initMenuList()
  },
  computed: {
    ...mapState([
      'routeInfo'
    ])
  },
  methods: {
    changeMenu (name) {
      this.$router.push({ name })
    },
    initMenuList () {
      this.menuList = cloneObj(homeMenuList)
    }
  }
}
</script>

<style lang="scss" scoped>
  .sidebar-menu-shrink-item {
    width: 70px;
    margin-left: -5px;
    padding: 10px 0;
    .ivu-icon {
      color: white;
    }
    &.router-active {
      .ivu-icon {
        color: #57a3f3;
      }
    }
    &:focus {
      box-shadow: 0 0 0 0;
    }
    &:hover {
      background-color: transparent;
      .ivu-icon {
        color: #57a3f3;
      }
    }
  }
  .sidebar-menu-shrink-dropdown {
    &:hover, &.router-active {
      background-color: #57a3f3;
      color: white;
    }
  }
</style>
